<template>
  <div ref="toTopDom" class="default fixed right-5% bottom-5%  wh-18 sm:wh-20 md:wh-24 transition-all" >
    <img class="cursor-pointer" :src="topImg" alt="toTop" @click="toTop">
  </div>
</template>

<script setup lang="ts">
import topImg from '@/assets/pic/下载.png';

const toTopDom = ref()


function scrollDelay(ms:any) {
    return new Promise(res => setTimeout(res, ms));
}
onMounted(()=>{
  window.addEventListener("scroll",()=>{

    if(window.scrollY >= window.innerHeight){
      toTopDom.value.style.opacity = '1'
      toTopDom.value.style.pointerEvents = 'auto'
    }else{
      toTopDom.value.style.opacity = '0'
      toTopDom.value.style.pointerEvents = 'none'
    }

  })


})


const toTop = async()=>{
  const height = document.documentElement.getBoundingClientRect().y

  for(let y = -height; y >= -200; y -= 80) {
    window.scrollTo({top: y, behavior: 'auto'})
    await scrollDelay(0)
  }
}

</script>

<style scoped>
.default{
  opacity: 0;
  pointer-events: none;
}
</style>